<template>
    <section class="cms-body" v-loading="loading">
        <!-- 返回组件 -->
        <cms-back></cms-back>
        <el-form  ref="form" :model="dataInfo" :rules="rules" class="cms-form" label-width="162px">
            <!-- 网站名称 -->
            <el-form-item label="名称" class="flex-50"  prop="name">
                <el-input class="cms-width" v-model="dataInfo.name"> </el-input>
            </el-form-item>
            <!-- 排序 -->
            <el-form-item label="排序" class="flex-50"  prop="priority">
                <el-input class="cms-width" v-model="dataInfo.priority" type="number"> </el-input>
            </el-form-item>
            <!-- 按钮组 -->
            <div class="form-footer">
                <el-button type="warning" v-if="isType('save')" @click="add(true)" v-perms="'/link/save'">
                    提交并继续添加
                </el-button>
                <el-button type="primary" v-if="isType('save')" @click="add(false)" v-perms="'/link/save'">
                    提交
                </el-button>
                <el-button type="primary" v-if="isType('update')" @click="update()" v-perms="'/link/update'">
                    修改
                </el-button>
                <el-button type="info" @click="$reset">重置</el-button>
                <span class="gray" v-if="isType('save')">选择“提交并继续添加”按钮会停留在添加页面；选择“提交”按钮后将跳转到对应的列表页</span>
            </div>
        </el-form>
    </section>
</template>
<script>
    import axios from "axios";
    import va from "@/rules";
    import formMixns from "@/mixins/form";
    export default {
        mixins: [formMixns], //普通表单变量
        data() {
            let required = va.required('此项必填');
            let number = va.number('必须为数字');
            return {
                dataInfo:{
                },
                rules: {//校验规则
                    name:[required],
                    priority:[required,number]
                }
            };
        },
        methods: {
            getDataInfo(id) {//重写获取表单数据
                let api = this.$api; //API地址
                axios.post(this.$api.linkGet,{id:id})
                    .then(res => {
                        this.loading = false;
                        this.dataInfo = res.body;
                        //this.getLinkTypes();
                    }).catch(err => {
                    this.loading = false;
                });
            },
            update() {
                this.updateDataInfo(this.$api.linkUpdate, this.dataInfo, "list");
            },
            add(state) {
                this.saveDataInfo(state,this.$api._positionSave, this.dataInfo, "list");
            },
        },
        created() {
            //初始获取数据
            this.getDataInfo(this.id);
            this.loading = false;
        }
    };
</script>

<style>

</style>
